<template>
  <div class="main-menu" :style="getStyle">
    <div class="title">
      <span>{{title}}</span>
      <span @click="hide">X</span>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RMenu',
  props: ['value', 'title', 'width'],
  data () {
    return {
      show: false
    }
  },
  created () {
    this.show = this.value
  },
  methods: {
    hide () {
      this.show = !this.show
    }
  },
  computed: {
    getStyle () {
      return {
        width: this.width,
        left: `${this.show ? 0 : -parseInt(this.width) - 10}px`
      }
    }
  },
  watch: {
    value: function (newVal) {
      this.show = newVal
    },
    show: function (newVal) {
      this.$emit('input', newVal)
    }
  }
}
</script>

<style scoped lang="less">

  @padding: 15px;
  @boxType: border-box;
  .main-menu {
    position: fixed;
    top: 0;
    height: 100%;
    padding: @padding;
    box-sizing: @boxType;
    background-color: #fff;
    transition: left 1s;
    z-index: 91;
    box-shadow: 5px 0 10px lightgrey;

    @titleHeight: 50px;

    .title {
      padding: @padding;
      box-sizing: @boxType;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: @titleHeight;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      font-weight: bold;
      border-bottom: 1px solid lightgrey;

      span:last-child {
        cursor: pointer;
      }
    }

    .content {
      margin-top: (@titleHeight - 15px);
    }
  }
</style>
